<template>
	<div>
		<basic-container>
			<!-- <avue-data-tabs :option="option"></avue-data-tabs> -->
			<!-- 资金账户 -->
			<div class="accountBox">
				<div class="hypermarket">
					<div class="hypermarkTop"></div>
					<div class="hyperTitle">预计待结算</div>
					<div class="accountSum">
						<div style="width: 100%;text-align: center;"><span>￥</span>{{this.accountData.allMount}}</div>
						<div>
							<span>在途金额</span>
							<span >：(￥{{this.accountData.lockAmount}})</span>
						</div>
					</div>
<!--					<div class="accountLine"></div>-->
<!--					<el-button class="accountBtn" round @click="accountDialogOpen(1)">充值</el-button>-->
				</div>
				<div class="hypermarket usableBg">
					<div class="hypermarkTop"></div>
					<div class="hyperTitle">实际可结算金额</div>
					<div class="accountSum">
						<div style="width: 100%;text-align: center;"><span>￥</span>{{this.accountData.totalAmount}}</div>
						<div>
							<span>当前账户</span>
							<!-- <span v-if="this.accountData.lockAmount>0">：(￥{{this.accountData.lockAmount}})</span> -->
						</div>
					</div>
<!--					<div class="accountLine"></div>-->
<!--					<el-button class="accountBtn" round @click="accountDialogOpen(2)">提现</el-button>-->
				</div>
<!--				<div class="hypermarket adBg">-->
<!--					<div class="hypermarkTop"></div>-->
<!--					<div class="hyperTitle">广告币</div>-->
<!--					<div class="accountSum">-->
<!--						<div style="width: 100%;text-align: center;"><span>￥</span>{{this.accountData.adAmount}}</div>-->
<!--						<div>-->
<!--							<span>当前账户</span>-->
<!--							&lt;!&ndash; <span v-if="this.accountData.lockAmount>0">：(￥{{this.accountData.lockAmount}})</span> &ndash;&gt;-->
<!--						</div>-->
<!--					</div>-->
<!--					<div class="accountLine"></div>-->
<!--					<el-button class="accountBtn" round @click="accountDialogOpen(3)">充值</el-button>-->
<!--				</div>-->
			</div>
			<el-tabs v-model="activeName" @tab-click="handleClick" style="padding-top: 30px;">
				<el-tab-pane label="账户总金额" name="A">
				</el-tab-pane>
				<el-tab-pane label="实际可结算金额" name="B">
				</el-tab-pane>
<!--				<el-tab-pane label="账户广告币" name="C">-->
<!--				</el-tab-pane>-->
			</el-tabs>

			<!--充值/提现/充值-->
			<el-dialog :title="titleBan" width="36%" :visible.sync="dialogActVisible">
				<el-form ref="dialogRules" :model="dialogForm" label-width="100px">
					<el-form-item v-if="dialogForm.type != '提现'" label="充值金额">
						<el-input  @blur="checkMax" :maxlength="10" v-model="dialogForm.price" placeholder="请输入充值金额" auto-complete="new-password"></el-input>
					</el-form-item>
					<el-form-item v-else label="提现金额">
						<el-input @blur="checkMax" :maxlength='10' v-model="dialogForm.price" placeholder="请输入提现金额"></el-input>
					</el-form-item>
					<el-form-item v-if="dialogForm.type == '提现'" label="提现方式">

						<el-radio-group v-model="dialogForm.cashType" v-for="item in tabs" :key="item.value" @change="toggleTab(item.label,item.value)">
							<el-radio-button v-if="item.isShow && item.value != 0" :label="item.label"></el-radio-button>
						</el-radio-group>

					</el-form-item>
					<el-form-item v-if="dialogForm.type == '充值'" label="充值方式">
						<el-radio-group v-model="dialogForm.cashType" v-for="item in tabs" :key="item.value" @change="toggleTab(item.label,item.value)">
							<el-radio-button v-if="item.isShow && item.value != 0" :label="item.label"></el-radio-button>
						</el-radio-group>
						<el-input v-if="dialogForm.type == '广告币充值'" type="text" v-model="dialogForm.rechargeType"></el-input>
					</el-form-item>
					<el-form-item v-if="dialogForm.type == '提现'" label="提现账号">
						<el-input v-model.text="dialogForm.cashAccount" placeholder="请输入提现账号"></el-input>
					</el-form-item>
					<el-form-item v-if="dialogForm.type !== '充值'" label="支付密码">
						<el-input type="password" v-model="dialogForm.passWord" placeholder="请输入支付密码" auto-complete="new-password"></el-input>
					</el-form-item>
					<el-form-item v-if="dialogForm.type == '提现'" label="提现备注">
						<el-input type="textarea" v-model.text="dialogForm.remark" placeholder="请填写提现备注"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button v-if="dialogForm.type !== '充值'" type="primary" @click="changePayPassWord" size="mini">修改支付密码</el-button>
					<!--<router-link v-if="dialogForm.type !== '充值'" ype="primary" size="mini" to="/user/setting">修改支付密码</router-link>-->
					<el-button v-if="dialogForm.type !== '充值'" type="primary" @click="forgetPayPassWord" size="mini">忘记支付密码</el-button>
					<el-button type="primary" :disabled="isDisabled" @click="submitAdvert('dialogRules')" size="mini" :loading="loadBtn">确 定</el-button>
					<el-button @click="closeDialog('dialogRules')" size="mini">取 消</el-button>
				</span>
			</el-dialog>

			<avue-crud :option="optionDetail" :data="dataDetail" ref="crud" v-model="form" :table-loading="loading" :page="page"
			 @refresh-change="refreshChange" @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
			 @size-change="sizeChange"  @on-load="onLoad">
				<template slot-scope="scope" slot="menu">
					<el-button type="text" size="small" @click="viewDetail(scope.row)">交易日志</el-button>
				</template>
			</avue-crud>

			<el-dialog title="交易日志" v-if="showTradeLog" width="60%" :visible.sync="dialogLogVisible" @closed="closeLogDialog()">
				<user-account-log ref="tradeLogList" v-bind:whichRole="whichRole" v-bind:whichType="whichType" v-bind:passUaId="passUaId" v-bind:passTrId="passTrId"/>
			</el-dialog>

		</basic-container>
	</div>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	import userAccountLog from "@/components/userAccountLog/userAccountLog";
	import {
		getInforList,
		tradeRecordList,
		advertRecharge,
		withdraw,
		recharge,
		getPayInfo,
		tradeRecordLogList
	} from '@/api/account/seller/userAccount';
	var Dict = JSON.parse(localStorage.getItem("mall-dictionary")).content;
	import {
		validatMaxNum
	} from '@/util/validate';
	export default {
		name: 'userAccount',
		data() {
			return {
				isDisabled: false,
				loadBtn: false,
				currentPage: 1, //当前页面展示的数据  1  总金额， 2 可用金额 ，3 广告币
				currentPage1: 1, //用来记录账户总金额页面的当前页数
				currentPage2: 1, //用来记录账户可用金额页面的当前页数
				currentPage3: 1, //用来记录账户广告币页面的当前页数
				showTradeLog: false,
				dialogLogVisible:false,
				returnCode: '',
				tabs: [],
				titleBan: '广告币充值',
				activeName: 'A',
				form: {},
				accountId: null,
				uaId: this.accountId,
				dataDetail: [],
				dialogForm: {
					price: "",
					passWord: "",
					rechargeType: "余额支付",
					cashType: "",
					cashAccount: "",
					remark: ""
				},
				dialogRules: {
					price: [{
							required: true,
							message: '金额不能为空'
						},
						{
							type: 'number',
							message: '金额必须为数字值'
						}
					],
					passWord: [{
							required: true,
							message: '密码不能为空'
						},
						{
							type: 'number',
							message: '密码必须为数字值'
						}
					],
					rechargeType: [{
						required: true,
						message: '充值方式不能为空'
					}, ],
					cashType: [{
						required: true,
						message: '提现方式不能为空'
					}, ],
					cashAccount: [{
						required: true,
						message: '提现账户不能为空'
					}, ],
				},
				query: {
					tradeTypes: "",
				},
				dialogActVisible: false,
				accountData: null,
				loading: true,
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				option: {
					span: 8,
					data: [],
				},
				optionDetail: {
					size: 'mini',
					addBtn: false,
					editBtn: false,
					delBtn: false,
					viewBtn: false,
					menu: true,
					columnBtn: true,
					border: true,
					rowKey: 'id',
					align: 'center',
					height: 'auto',
					calcHeight: 380,
					menuWidth: 100,
					column: [{
							label: "创建时间",
							prop: "addTime",
							width: 150,
						},
						{
							label: "三方系统交易号",
							prop: "outTradeNo",
							width: 160,
						},
						{
							label: "交易类型",
							prop: "tradeType",
							width: 100,
							dicData: Dict.tradeTypeEnum,
							rules: [{
								required: true,
								message: "请输入交易类型：1订单收款，2分销返利加钱，3买家订单退款收入，4充值，5订单付款、6分销返利减钱、7卖家退款支出、8广告付款（扣广告账户）、9提现、10总账户转广告账户",
								trigger: "blur"
							}]
						},
						{
							label: "操作金额",
							prop: "amount",
						},
						{
							label: "抽佣金额",
							prop: "serviceAmount",
						},
						{
							label: "交易描述",
							prop: "subject",
							width: 100,
						},
						{
							label: "交易状态 ",
							prop: "tradeStatus",
							dicData: Dict.tradeStatusEnum,
							rules: [{
								required: true,
								message: "请输入交易状态 ：0等待买家付款  1交易失败 2成功 3已通知 4通知失败",
								trigger: "blur"
							}]
						},
						{
							label: "流水状态 ",
							prop: "lockStatus",
							dicData: Dict.lockStatusEnum,
							rules: [{
								required: true,
								message: "请输入交易状态 ：0等待买家付款  1交易失败 2成功 3已通知 4通知失败",
								trigger: "blur"
							}]
						},
					]
				},
				tradeRecordLogQuery: {},
				whichRole:'seller',
				whichType:"original",
				passUaId:'',
				passTrId:'',
			}
		},
		components: {
			userAccountLog,
		},
		watch: {
			dialogActVisible(val) {
				if (!val) {
					this.$nextTick(() => {
						this.$refs["addForm"].resetFields();
					})
				}
			},
		},

		created() {
			this.onLoad(this.page);
		},
		methods: {
			//判断输入金额 不能小于0  不能超过32位计算机可识别的最大整数
			checkMax(e){
				console.log(e)
				let num = e.target.value
				let rge = /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/
				if(num && !rge.test(Number(num))) {
					this.$message.error( "充值金额必须为大于0的整数或者小数点后有两位小数的小数（例：0.33）");
					this.dialogForm.price=''
				}else if(!validatMaxNum(Number(num))){
					this.$message.error( "充值金额不可大于2147483647");
					this.dialogForm.price=''
				}
			},
			//账户充值/提现弹框
			accountDialogOpen(index){
				if(index == 1){
					this.dialogOpen('充值');
				}else if(index == 2) {
					this.cashDialogOpen('提现');
				}else {
					this.dialogOpen('广告币充值');
				}
				this.isDisabled = false;
			},
			// 切换tab
			handleClick(tab) {
				if (tab.index == 0) { //用户账户总金额
					this.currentPage = 1;
					this.page.currentPage = this.currentPage1;
					this.query.tradeTypes = ""
				} else if (tab.index == 1) { //账户可用金额
					this.currentPage = 2;
					this.page.currentPage = this.currentPage2;
					this.query.tradeTypes = "1,3,4,9"
				} else if (tab.index == 2) { //账户可用于购买广告金额
					this.currentPage = 3;
					this.page.currentPage = this.currentPage3;
					this.query.tradeTypes = "8,10"
				}
				this.onLoad(this.page)
			},
			/*打开弹框*/
			dialogOpen(value) {
				this.isDisabled=false
				this.dialogForm = {
						price: "",
						passWord: "",
						cashType: "",
						cashAccount: "",
						cashId: ""
					},
					this.dialogForm.type = value;
				console.log(this.dialogForm.type);
				this.dialogActVisible = true;
				this.titleBan = "充值";
				return false
			},
			cashDialogOpen(value) {
				this.dialogForm = {
					price: "",
					passWord: "",
					cashType: "",
					cashAccount: "",
					cashId: ""
				},
				this.dialogForm.type = value;
				this.dialogActVisible = true;
				this.titleBan = "提现";
				console.log(this.dialogForm.type);
				return false
			},
			submitAdvert(dialogRules) {
				this.loadBtn = true;
				console.log(this.dialogForm)
				if (this.dialogForm.remark == undefined) {
					this.dialogForm.remark = ''
				}
				this.$refs[dialogRules].validate((valid) => {
					if (valid) {
					    console.log(this.dialogForm.price)
						if (this.dialogForm.type == "广告币充值") {
						    //可用余额不可小于充值金额
                            if(Number(this.accountData.totalAmount)<this.dialogForm.price){
                                this.$message({
                                    type: "error",
                                    message: "可用金额不足"
                                });
                                this.loadBtn = false;
                                return false;
                            }else{
                                //金额不可为空
                                if (this.dialogForm.price == "") {
                                    this.$message({
                                        type: "error",
                                        message: "请输入充值金额"
                                    });
                                    this.loadBtn = false;
                                    return false;
                                }
                            }
							// if (this.dialogForm.price <= 0) {
							// 	this.$message({
							// 		type: "error",
							// 		message: "充值金额不可小于等于0"
							// 	});
							// 	this.loadBtn = false;
							// 	return false;
							// }
							advertRecharge(this.dialogForm, this.accountId).then(res => {
								console.log(res);
								this.accountId = this.accountData.id;
								if (res.data.code == 200) {
									this.isDisabled=true
									this.$message.success('充值成功');
									this.onLoad(this.page);
									this.dialogActVisible = false;
								} else {
									this.$message({
										type: "error",
										message: res.data.message
									});
								}
								this.loadBtn = false;
								this.$refs[dialogRules].resetFields();
							})
						}
						if (this.dialogForm.type == "充值") {
							//金额不可为空
							if (this.dialogForm.price == "") {
								this.$message({
									type: "error",
									message: "请输入充值金额"
								});
								this.loadBtn = false;
								return false;
							}
							if (this.dialogForm.price <= 0) {
								this.$message({
									type: "error",
									message: "充值金额不可小于等于0"
								});
								this.loadBtn = false;
								return false;
							}
							//充值方式不能为空
							if (!this.dialogForm.cashId) {
								this.$message({
									type: "error",
									message: "请选择充值方式"
								});
								this.loadBtn = false;
								return false;
							}
							console.log(this.dialogForm);
							recharge(this.dialogForm.price).then(res => {
								console.log(res.data.data);
								this.accountId = this.accountData.id;
								if (res.data.code == 200) {
									this.isDisabled=true
									this.$message.success('充值成功');
									this.onLoad(this.page);
									this.dialogActVisible = false;
								} else {
									this.$message({
										type: "error",
										message: res.data.message
									});
								}
								this.loadBtn = false;
								this.$refs[dialogRules].resetFields();
							})
						}
						if (this.dialogForm.type == "提现") {
							//金额不可为空
							if (this.dialogForm.price == "") {
								this.$message({
									type: "error",
									message: "请输入提现金额"
								});
								this.loadBtn = false;
								return false;
							}
							//提现金额不可小于0
							if (this.dialogForm.price <= 0) {
								this.$message({
									type: "error",
									message: "提现金额不可小于等于0"
								});
								this.loadBtn = false;
								return false;
							}
							//提现方式不能为空
							if (!this.dialogForm.cashId) {
								this.$message({
									type: "error",
									message: "请选择提现方式"
								});
								this.loadBtn = false;
								return false;
							}
							//提现账号不能为空
							if (!this.dialogForm.cashAccount) {
								this.$message({
									type: "error",
									message: "请输入提现账号"
								});
								this.loadBtn = false;
								return false;
							}

							//支付密码不能为空
							if (!this.dialogForm.passWord) {
								this.$message({
									type: "error",
									message: "请输入支付密码"
								});
								this.loadBtn = false;
								return false;
							}
							//提现请求
							if (this.dialogForm.price > Number(this.accountData.totalAmount)) {
								this.$message.error("提现金额不能超过账户可用金额");
								this.loadBtn = false;
								return;
							}
							withdraw(this.dialogForm,this.accountId).then(res => {
							    console.log(res);
							    this.accountId= this.accountData.id;
							    if (res.data.code == 200) {
									this.isDisabled=true
							        this.$message.success('提现成功');
							        this.onLoad(this.page);
							        this.dialogActVisible = false;
							    }else{
							        this.$message({
							            type: "error",
							            message: res.data.message
							        });
							    }
								this.loadBtn = false;
							    this.$refs[dialogRules].resetFields();
							})
						}
					} else {
						this.$message({
							type: "error",
							message: res.data.message
						});
						this.loadBtn = false;
						return false;
					}
				});
			},
			toggleTab(label, value) {
				console.log(value)
				this.dialogForm.cashType = label
				this.dialogForm.cashId = value
			},
			changePayPassWord() {
				this.$router.push({
					path: '../../info/setting'
				})
			},
			forgetPayPassWord() {
				this.$router.push({
					path: '../../info/setting'
				})
			},
			closeDialog() {
				this.dialogActVisible = false;
				this.dialogForm = {
					price: "",
					passWord: "",
					cashType: "",
					cashAccount: "",
					cashId: ""
				}
			},
			//同步当前页的页码
			synchroPage(page) {
				if (this.currentPage == 1) {
					this.currentPage1 = page.currentPage;
				} else if (this.currentPage == 2) {
					this.currentPage2 = page.currentPage;
				} else if (this.currentPage == 3) {
					this.currentPage3 = page.currentPage;
				}
			},
			searchReset() {
				this.query = {};
				this.onLoad(this.page);
			},
			searchChange(params,done) {
				this.page.currentPage = 1
				this.query = params;
				this.onLoad(this.page, params,done);
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			refreshChange() {
				this.onLoad(this.page);
			},
			onLoad(page, params = {},done) {
				this.synchroPage(page);
				this.loading = true;
				//获取账户信息
				getInforList().then(res => {
					if(done){
						done();
					}
					if (res.data.code == 200) {
						this.accountData = res.data.data;
						this.accountId = this.accountData.id;
						this.query.uaId = this.accountId;
						//查询流水
						tradeRecordList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
							this.loading = false;
							const data = res.data;
							this.page.total = data.count;
							this.dataDetail = data.data;
							console.log(this.dataDetail)
						});
						this.accountData.allMount = Number(this.accountData.totalAmount) + Number(this.accountData.lockAmount)
						//总金额小于0时归0
                        if(this.accountData.allMount<0){
                            this.accountData.allMount = 0;
                        }
						if (!this.accountData.allMount) {
							this.accountData.allMount = 0 + "";
						}
						this.accountData.allMount = Math.floor(this.accountData.allMount * 100) / 100;
						this.accountData.totalAmount = this.accountData.totalAmount.toString();
						this.accountData.adAmount = this.accountData.adAmount.toString();
						this.accountData.addStringLock = '在途金额:' + '(￥' + this.accountData.lockAmount + ')'
						console.log(this.query)
				// 		this.option.data = [{
				// 				title: '总金额',
				// 				subtitle: '充值',
				// 				allcount: this.accountData.allMount,
				// 				text: this.accountData.addStringLock,
				// 				color: 'rgb(27, 201, 142)',
				// 				key: '总',
				// 				click: (item) => {
				// 					this.dialogOpen('充值');
				// 				},
				// 			},
				// 			{
				// 				title: '可用金额',
				// 				subtitle: '提现',
				// 				allcount: this.accountData.totalAmount,
				// 				text: '当前账户',
				// 				color: 'rgb(230, 71, 88)',
				// 				key: '金',
				// 				click: (item) => {
				// 					this.cashDialogOpen('提现');
				// 				},
				// 			},
				// 			{
				// 				title: '广告币',
				// 				subtitle: '充值',
				// 				allcount: this.accountData.adAmount,
				// 				text: '当前账户',
				// 				color: 'rgb(56, 161, 242)',
				// 				key: '充',
				// 				click: (item) => {
				// 					this.dialogOpen('广告币充值');
				// 				},
				// 			}
				// 		]
						console.log(this.accountData)
					}
				});
				this.tabs = Dict.payWayEnum

			},
			//查看交易日志
			viewDetail(row) {
				this.passUaId = row.uaId;
				this.passTrId = row.id;
				this.dialogLogVisible = true;
				this.showTradeLog = true;
			},
			//关闭查看的交易日志
			closeLogDialog(){
				this.dialogLogVisible = false;
				this.showTradeLog = false;
				this.onLoad(this.page);
			},
		},

	}
</script>
<style scoped="scoped" lang="scss">
	.el-tabs__nav-wrap::after {
		background-color: transparent;
	}

	.wel {
		&__header {
			padding: 25px 40px;
			border-bottom: 1px solid #e8e8e8;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&__info {
			display: flex;
			align-items: center;

			&-img {
				border-radius: 72px;
				display: block;
				width: 72px;
				height: 72px;

				img {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			&-content {
				position: relative;
				margin-left: 24px;
				color: rgba(0, 0, 0, 0.45);
				line-height: 22px;
			}

			&-title {
				font-size: 20px;
				line-height: 28px;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);
				margin-bottom: 12px;
			}

			&-subtitle {
				position: relative;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.45);
				line-height: 22px;
			}
		}

		&__extra {
			&-item {
				position: relative;
				padding: 0 32px;
				display: inline-block;

				&:last-child {
					&::after {
						display: none;
					}
				}

				&:after {
					background-color: #e8e8e8;
					position: absolute;
					top: 30px;
					right: 0;
					width: 1px;
					height: 40px;
					content: "";
				}
			}

			&-title {
				color: rgba(0, 0, 0, 0.45);
				font-size: 14px;
				line-height: 22px;
				margin-bottom: 4px;
			}

			&-subtitle {
				color: rgba(0, 0, 0, 0.85);
				font-size: 30px;
				line-height: 38px;
				margin: 0;

				span {
					color: rgba(0, 0, 0, 0.45);
					font-size: 20px;
				}
			}
		}
	}
	//账户资金
	.accountBox {
		display: flex;
		align-items: center;
		/*justify-content: space-between;*/
	}
	.hypermarket {
		width: 30%;
		margin: 20px 10px 0 ;
		padding: 16px 0;
		position: relative;
		border-radius: 4px;
		background-color: #fff;
		-webkit-box-shadow: 1px 2px 10px #eee;
		box-shadow: 1px 2px 10px #eee;
		.hypermarkTop {
			width: 100%;
			height: 6px;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 4px 4px 0 0;
			background-color: rgb(239, 72, 104);
		}
		.hyperTitle {
			text-align: center;
			padding: 20px 0;
			font-size: 20px;
			font-weight: 200;
		}
		.accountSum {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			padding: 0 10px;
			line-height: 30px;
			margin-right: 2px;
			font-size: 20px;
			font-weight: 600;
			color: rgb(239, 72, 104);
			span {
				margin-right: 5px;
				font-size: 14px;
				font-weight: 500;
			}
		}
		.accountLine {
			width: 60%;
			height: 1px;
			background: rgba(150,150,150,.1);
			margin: 20px auto;
		}
		.accountBtn {
			display: block;
			width: 120px;
			height: 32px;
			padding: 0 23px;
			line-height: 32px;
			margin: 0 auto;
			text-align: center;
			border-radius: 32px;
			color: #fff;
			background-color: rgb(239, 72, 104);
			cursor: pointer;
			-webkit-transition: opacity .2s ease-in-out;
			transition: opacity .2s ease-in-out;
		}
		.hyperList {
			list-style: none;
			height: 36px;
			line-height: 36px;
			margin: 0 20px;
			color: #666;
			font-size: 10px;
			border-bottom: 1px dashed #f5f6f7;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
		.hyperListName {
			width: calc(100% - 110px);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding: 0 40px 0 5px;
		}
	}
	.hypermarket.usableBg {
		.hypermarkTop {
			background: rgb(27, 201, 142);
		}
		.accountSum {
			color: rgb(27, 201, 142);
		}
		.accountBtn {
			background: rgb(27, 201, 142);
		}
	}
	.hypermarket.adBg {
		.hypermarkTop {
			background: rgb(56, 161, 242);
		}
		.accountSum {
			color: rgb(56, 161, 242);
		}
		.accountBtn {
			background: rgb(56, 161, 242);
		}
	}
</style>
